<template>
  <div class="ui-prototype-container">
    <div class="header">
      <h1>UI 原型设计</h1>
      <div class="header-actions">
        <el-button type="primary" @click="createPrototype">新建原型</el-button>
        <el-button @click="importPrototype">导入原型</el-button>
        <el-button @click="exportPrototype">导出原型</el-button>
        <el-button type="success" @click="showPreviewDialog">
          <el-icon><View /></el-icon>
          预览
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="projects">
            <el-icon><Folder /></el-icon>
            <span>项目管理</span>
          </el-menu-item>
          <el-menu-item index="canvas">
            <el-icon><Picture /></el-icon>
            <span>设计画布</span>
          </el-menu-item>
          <el-menu-item index="components">
            <el-icon><Collection /></el-icon>
            <span>组件库</span>
          </el-menu-item>
          <el-menu-item index="templates">
            <el-icon><CopyDocument /></el-icon>
            <span>模板中心</span>
          </el-menu-item>
          <el-menu-item index="preview">
            <el-icon><View /></el-icon>
            <span>实时预览</span>
          </el-menu-item>
          <el-menu-item index="export">
            <el-icon><Download /></el-icon>
            <span>导出选项</span>
          </el-menu-item>
          <el-menu-item index="settings">
            <el-icon><Setting /></el-icon>
            <span>设置</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="content">
        <component
          :is="currentComponent"
          v-if="currentComponent"
          @update-prototype="handleUpdatePrototype"
        />
        <div v-else class="welcome">
          <h2>欢迎使用 UI 原型设计工具</h2>
          <p>请从左侧菜单选择功能开始设计</p>
        </div>
      </div>
    </div>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      title="原型预览"
      fullscreen
      :destroy-on-close="false"
      :before-close="closePreviewDialog"
    >
      <div class="preview-dialog-content">
        <div class="preview-toolbar">
          <div class="device-selector">
            <el-radio-group v-model="previewDevice" size="small">
              <el-radio-button label="desktop">
                <el-icon><Monitor /></el-icon>
                桌面端
              </el-radio-button>
              <el-radio-button label="tablet">
                <el-icon><Ipad /></el-icon>
                平板
              </el-radio-button>
              <el-radio-button label="mobile">
                <el-icon><Cellphone /></el-icon>
                手机
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="preview-actions">
            <el-button type="primary" size="small" @click="takeScreenshot">
              <el-icon><Camera /></el-icon>
              截图
            </el-button>
            <el-dropdown trigger="click" @command="handleShareAction">
              <el-button size="small">
                <el-icon><Share /></el-icon>
                分享
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="link">生成链接</el-dropdown-item>
                  <el-dropdown-item command="qrcode">生成二维码</el-dropdown-item>
                  <el-dropdown-item command="wechat">微信分享</el-dropdown-item>
                  <el-dropdown-item command="weibo">微博分享</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button size="small" @click="closePreviewDialog">
              <el-icon><Close /></el-icon>
              关闭
            </el-button>
          </div>
        </div>

        <div class="preview-device-container">
          <div class="device-frame" :class="previewDevice">
            <div class="device-screen">
              <!-- 这里渲染预览内容 -->
              <div v-if="previewLoading" class="preview-loading">
                <el-icon class="loading-icon"><Loading /></el-icon>
                <span>加载预览中...</span>
              </div>
              <div v-else class="preview-content">
                <!-- 渲染设计画布内容的预览 -->
                <div
                  v-for="element in previewElements"
                  :key="element.id"
                  :style="getElementStyle(element)"
                  class="preview-element"
                >
                  <template v-if="element.type === 'text'">
                    {{ element.content }}
                  </template>
                  <template v-else-if="element.type === 'image'">
                    <el-image :src="element.src || 'https://placeholder.pics/svg/200/DEDEDE/555555/图片'" fit="contain" />
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 截图预览对话框 -->
      <el-dialog
        v-model="screenshotDialogVisible"
        title="截图预览"
        width="60%"
        append-to-body
      >
        <div class="screenshot-container">
          <img :src="screenshotUrl" class="screenshot-image" />
        </div>
        <div class="screenshot-actions">
          <el-button type="primary" @click="downloadScreenshot">
            <el-icon><Download /></el-icon>
            下载截图
          </el-button>
          <el-button @click="screenshotDialogVisible = false">关闭</el-button>
        </div>
      </el-dialog>

      <!-- 分享链接对话框 -->
      <el-dialog
        v-model="shareLinkDialogVisible"
        title="分享链接"
        width="400px"
        append-to-body
      >
        <div class="share-link-container">
          <el-input
            v-model="shareLink"
            readonly
            :autoselect="true"
          >
            <template #append>
              <el-button @click="copyShareLink">复制</el-button>
            </template>
          </el-input>

          <div v-if="shareType === 'qrcode'" class="qrcode-container">
            <img :src="qrcodeUrl" class="qrcode-image" />
            <el-button type="primary" size="small" @click="downloadQrcode">
              <el-icon><Download /></el-icon>
              下载二维码
            </el-button>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, shallowRef, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Folder,
  Picture,
  Collection,
  CopyDocument,
  View,
  Download,
  Setting,
  Monitor,
  Cellphone,
  Camera,
  Share,
  ArrowDown,
  Close,
  Loading
} from '@element-plus/icons-vue'

// 导入组件（这些组件需要创建）
import ProjectManager from '@/components/ai/prototype/ProjectManager.vue'
import DesignCanvas from '@/components/ai/prototype/DesignCanvas.vue'
import ComponentLibrary from '@/components/ai/prototype/ComponentLibrary.vue'
import TemplateCenter from '@/components/ai/prototype/TemplateCenter.vue'
import LivePreview from '@/components/ai/prototype/LivePreview.vue'
import ExportOptions from '@/components/ai/prototype/ExportOptions.vue'
import ProtoSettings from '@/components/ai/prototype/ProtoSettings.vue'

const activeMenu = ref('projects')
const currentComponent = shallowRef(ProjectManager)

const handleMenuSelect = (index) => {
  activeMenu.value = index
  switch (index) {
    case 'projects':
      currentComponent.value = ProjectManager
      break
    case 'canvas':
      currentComponent.value = DesignCanvas
      break
    case 'components':
      currentComponent.value = ComponentLibrary
      break
    case 'templates':
      currentComponent.value = TemplateCenter
      break
    case 'preview':
      currentComponent.value = LivePreview
      break
    case 'export':
      currentComponent.value = ExportOptions
      break
    case 'settings':
      currentComponent.value = ProtoSettings
      break
  }
}

const createPrototype = () => {
  ElMessage.success('创建新原型')
  activeMenu.value = 'canvas'
  currentComponent.value = DesignCanvas
}

const importPrototype = () => {
  ElMessage.info('导入原型功能开发中')
}

const exportPrototype = () => {
  ElMessage.info('导出原型功能开发中')
}

const handleUpdatePrototype = (data) => {
  ElMessage.success('原型已更新')
}

// 预览功能
const previewDialogVisible = ref(false)
const previewDevice = ref('desktop')
const previewLoading = ref(true)
const previewElements = ref([])
const screenshotDialogVisible = ref(false)
const screenshotUrl = ref('')
const shareLinkDialogVisible = ref(false)
const shareLink = ref('')
const shareType = ref('')
const qrcodeUrl = ref('')

// 预览设备尺寸
const deviceDimensions = computed(() => {
  const dimensions = {
    desktop: { width: '1280px', height: '720px' },
    tablet: { width: '768px', height: '1024px' },
    mobile: { width: '375px', height: '667px' }
  }
  return dimensions[previewDevice.value]
})

// 显示预览对话框
const showPreviewDialog = () => {
  previewDialogVisible.value = true
  previewLoading.value = true

  // 模拟加载预览内容
  setTimeout(() => {
    loadPreviewContent()
    previewLoading.value = false
  }, 800)
}

// 加载预览内容
const loadPreviewContent = () => {
  // 模拟元素数据 - 在实际应用中，应该从设计画布组件获取
  previewElements.value = [
    {
      id: 1,
      type: 'rectangle',
      x: 0,
      y: 0,
      width: 1280,
      height: 60,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 0,
      borderBottomWidth: 1,
      borderRadius: 0
    },
    {
      id: 2,
      type: 'text',
      x: 20,
      y: 10,
      width: 200,
      height: 40,
      content: 'MyApp Logo',
      fontFamily: 'Arial, sans-serif',
      fontSize: 20,
      color: '#333333',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 3,
      type: 'rectangle',
      x: 200,
      y: 100,
      width: 880,
      height: 200,
      backgroundColor: '#f5f7fa',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 4
    },
    {
      id: 4,
      type: 'text',
      x: 240,
      y: 120,
      width: 800,
      height: 40,
      content: '欢迎使用我们的应用',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 28,
      color: '#303133',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 5,
      type: 'text',
      x: 240,
      y: 180,
      width: 800,
      height: 80,
      content: '这是一个示例页面预览，展示了原型设计的实时效果。在实际应用中，此处将显示您在设计画布中创建的UI界面。',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 14,
      color: '#606266',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 6,
      type: 'rectangle',
      x: 200,
      y: 340,
      width: 280,
      height: 160,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 4
    },
    {
      id: 7,
      type: 'text',
      x: 220,
      y: 360,
      width: 240,
      height: 30,
      content: '功能一',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 18,
      color: '#303133',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    }
  ]
}

// 获取元素样式
const getElementStyle = (element) => {
  return {
    position: 'absolute',
    left: `${element.x}px`,
    top: `${element.y}px`,
    width: `${element.width}px`,
    height: `${element.height}px`,
    backgroundColor: element.backgroundColor || 'transparent',
    border: element.borderWidth > 0 ? `${element.borderWidth}px solid ${element.borderColor || '#ccc'}` : 'none',
    borderRadius: `${element.borderRadius}px`,
    fontFamily: element.fontFamily || 'Arial, sans-serif',
    fontSize: element.fontSize ? `${element.fontSize}px` : 'inherit',
    color: element.color || '#000',
    display: 'flex',
    alignItems: 'center',
    justifyContent: element.textAlign === 'center' ? 'center' : 'flex-start',
    overflow: 'hidden',
    whiteSpace: element.whiteSpace || 'normal',
    textAlign: element.textAlign || 'left',
    borderBottomWidth: element.borderBottomWidth ? `${element.borderBottomWidth}px` : null,
    borderRightWidth: element.borderRightWidth ? `${element.borderRightWidth}px` : null
  }
}

// 关闭预览对话框
const closePreviewDialog = () => {
  previewDialogVisible.value = false
}

// 截图功能
const takeScreenshot = () => {
  // 模拟截图
  ElMessage.success('正在生成截图...')
  setTimeout(() => {
    // 在实际应用中，应该使用html2canvas等库进行截图
    screenshotUrl.value = `https://placeholder.pics/svg/1024x768/DEDEDE/555555/UI原型截图-${previewDevice.value}`
    screenshotDialogVisible.value = true
  }, 800)
}

// 下载截图
const downloadScreenshot = () => {
  // 模拟下载
  ElMessage.success('截图已下载')
  screenshotDialogVisible.value = false
}

// 处理分享操作
const handleShareAction = (command) => {
  shareType.value = command

  // 模拟生成分享链接
  shareLink.value = `https://example.com/preview/project-123456?device=${previewDevice.value}`

  if (command === 'qrcode') {
    // 模拟生成二维码
    qrcodeUrl.value = `https://placeholder.pics/svg/200/DEDEDE/555555/二维码`
  }

  if (command === 'link' || command === 'qrcode') {
    shareLinkDialogVisible.value = true
  } else {
    // 第三方分享
    ElMessage.success(`已打开${command}分享窗口`)
  }
}

// 复制分享链接
const copyShareLink = () => {
  // 在实际应用中，应该使用clipboard API
  navigator.clipboard.writeText(shareLink.value).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制')
  })
}

// 下载二维码
const downloadQrcode = () => {
  // 模拟下载
  ElMessage.success('二维码已下载')
}
</script>

<style scoped>
.ui-prototype-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.welcome {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.welcome h2 {
  margin-bottom: 16px;
  font-size: 28px;
}

/* 预览对话框样式 */
.preview-dialog-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.preview-actions {
  display: flex;
  gap: 12px;
}

.preview-device-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: auto;
  background: #e0e0e0;
}

.device-frame {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.device-frame.desktop {
  width: 1280px;
  height: 720px;
  max-width: 100%;
  max-height: 100%;
}

.device-frame.tablet {
  width: 768px;
  height: 1024px;
  max-width: 100%;
  max-height: 100%;
  border: 12px solid #1a1a1a;
  border-radius: 12px;
}

.device-frame.mobile {
  width: 375px;
  height: 667px;
  max-width: 100%;
  max-height: 100%;
  border: 16px solid #1a1a1a;
  border-radius: 24px;
}

.device-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}

.preview-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 16px;
  animation: spin 2s linear infinite;
}

.preview-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.preview-element {
  user-select: none;
  pointer-events: none;
}

/* 截图预览样式 */
.screenshot-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.screenshot-image {
  max-width: 100%;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.screenshot-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 分享链接样式 */
.share-link-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
